<template>
  <div>
    <group>
      <popup-radio title="厂站选择" v-model="state" :options="options">
        <popup-header slot="popup-header" title="请选择"></popup-header>
      </popup-radio>
    </group>
    <group>
      <popup-radio title="遥测选择" v-model="stateYC" :options="optionsYC" :readonly="isEmpty">
        <popup-header slot="popup-header" title="请选择"></popup-header>
      </popup-radio>
    </group>
    <group>
      <datetime v-model="date" title="日期" :end-date="today"></datetime>
    </group>
    <div v-show="isEmpty" class="tip">改厂站暂无遥测 请选择其他厂站</div>
    <div id="container1" style="width: 100%;height:280px;"></div>
  </div>
</template>

<script>
export default {
  name: 'HistoryData',
  data () {
    return {
      options: [],
      optionsYC: [],
      date: '2020-02-04',
      today: '',
      state: '',
      stateYC: '0',
      isEmpty: true
    }
  },
  methods: {
    search () {
      if (this.isEmpty) {
        return
      }
      /* eslint-disable */
      var option = {
        title: {
          text: '日负荷曲线(V)',
          textStyle: {
            fontSize: 13
          }
          // left: 'center'
        },
        grid:{
              // x:'5%',
              y:'13%',
              x2:'5%',
              y2:'10%'
          },
        legend: {
          // left: 'left',
          itemWidth: 35,// 标志图形的长度
          itemHeight: 10,
          data: ['电压'],
          textStyle: {
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // name: 'x',
          // splitLine: {show: false},
          // axisLabel: { interval: 11 },
          data: []
        },
        yAxis: {
          type: 'value',
          // scale: true,
          // axisLabel: {
          //   formatter: '{value}kW'
          // }
        },
        series: [{
          name: '电压',
          type: 'line',
          data: [],
          connectNulls: true,
          lineStyle: {
            normal: {}
          },
          //data:[11, 11, 15, 13, 12, 13, 10],
          // markPoint: {
          //   data: [
          //     {type: 'max', name: '最大值'},
          //     {type: 'min', name: '最小值'}
          //   ],
          //   symbolSize: 30
          // }
        }]
      }
      function getTimeIntFromStr(ts){
          var ds = ts.split("-");
          if(ds.length!=3) return ;
          var y = ds[0];
          var m = ds[1];
          var d = ds[2];
          var date = new Date();
          date.setFullYear(y,m-1,d);
          return getDateInt(date);
      }
      function getDateInt(date){
          date.setHours(0,0,0,0);
          var ms = date.getTime() - date.getTimezoneOffset() * 60 * 1000;
          ms = ms/(24 * 60 * 60 * 1000) + 25569;
          return ms.toFixed(0);
      }
      function getTableTime(ts){
          var ds = ts.split("-");
          if(ds.length!=3) return ;
          return ds[0]+ds[1];
      }
      function filterZero(arr){
          var temp=[];
          for(var item in arr){
              var v=arr[item];
              if(v==0||v=="0"){
                  temp[item]="null";
              }else
                  temp[item]=v;
          }
          return temp;
      }
      var myChart = echarts.init(document.getElementById('container1'), 'light');
      var dataTime = getTimeIntFromStr(this.date);
      var tableTime=getTableTime(this.date);
      this.newProjectDwr.GetMulDayHisDataXText(this.date, result => {
        this.newProjectDwr.getHistoryAnalogValue(this.stateYC, dataTime, tableTime, res => {
          option.xAxis.data=result;
          option.series[0].data=filterZero(res);
          option.title.text = this.optionsYC[0]['value'] + '(V)'
          myChart.setOption(option);
        })
      })
    },
    /* eslint-enable */
    init () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      month < 10 && (month = '0' + month)
      day < 10 && (day = '0' + day)
      this.today = this.date = `${year}-${month}-${day}`
      this.newProjectDwr.getSubstationList(res => {
        var list = res.split(',')
        const id = localStorage.scadaId
        const len = list.length
        var obj = []
        for (var i = 0; i < len; i = i + 2) {
          if (id.includes(list[i])) {
            if (!this.state) {
              this.state = list[i]
            }
            obj.push({ key: list[i], value: list[i + 1] })
          }
        }
        this.options = obj
        this.getYC()
      })
    },
    getYC () {
      this.newProjectDwr.getCurveInfoOptions(this.state, res => {
        if (!res.length) {
          this.optionsYC = [{ key: '0', value: '无' }]
          this.isEmpty = true
          return
        }
        var obj = []
        res.forEach(item => {
          var val = item.split(',')
          obj.push({ key: val[0], value: val[1] })
        })
        this.optionsYC = obj
        this.isEmpty = false
        this.stateYC = res[0].split(',')[0]
      })
    }
  },
  created () {
    this.init()
  },
  watch: {
    state () {
      this.getYC()
    },
    stateYC () {
      this.search()
    },
    date (val) {
      console.log(val)
      this.search()
    }
  }
}
</script>

<style scoped>
.input{
  -webkit-appearance: none;
  outline: 0;
}
</style>
